<template>
    <view class="member">
        <view class="mbg" :style="'background-image: url(' + imgUrl + '/static/images/merber/bbg.png' + ')'">
            <view class="nav" v-if="info && info.json">
                <scroll-view class="nav-scroll" :scroll-x="true" :scroll-with-animation="true" :show-scrollbar="false">
                    <view class="nav-item" v-for="(e, index) in info.json" :key="index">
                        <image v-if="memberEquity == index" :src="e.check_image" mode="scaleToFill" />
                        <image @click="getMember(index)" v-else :src="e.image" mode="scaleToFill" />
                    </view>
                </scroll-view>
                <view class="nav-text" v-if="info && info.json[memberEquity]">
                    <text class="nav-text-1">{{ info.json[memberEquity].name }}</text>
                    <text class="nav-text-2">{{ info.json[memberEquity].describe }}</text>
                </view>
            </view>

            <image class="abg" :src="imgUrl + '/static/images/merber/abg.png'" mode="widthFix" />
            <view class="mcontent-title">权益说明</view>
        </view>
        <view class="parase" v-if="info">
            <scroll-view scroll-y="true" :style="'height: ' + height + 'px'">
                <rich-text :nodes="info.explain"></rich-text>
            </scroll-view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            imgUrl: this.$imgUrl || "",
            memberEquity: 0, // 会员权益当前选中
            EquityStatement: "", // 权益说明当前说明
            info: {},
            height: 0,// 获取标签到顶部的高度
        };
    },
    onLoad(options) {
        this.memberEquity = Number(options.memberEquity);
        this.getEquityStatement(options.id);
        // 获取屏幕高度
        let height1 = uni.getSystemInfoSync().screenHeight;
        // 获取标签到顶部的高度
        setTimeout(() => {
            let query = uni.createSelectorQuery();
            query
                .select(".parase")
                .boundingClientRect((res) => {
                    this.height = height1 - res.top - 200;
                    console.log(height1, "屏幕高度", res.top, "标签到顶部的高度", this.height);
                })
                .exec();
        }, 200)

    },
    mounted() {

    },
    methods: {
        // 返回
        leftClick() {
            uni.navigateBack();
        },
        // 会员权益
        goto() {
            uni.navigateTo({
                url: "/pages/user/member/membership",
            });
        },
        // 获取会员权益
        getMember(e) {
            this.memberEquity = e;
            console.log(this.memberEquity, "r\membership.vue-第61行");
        },

        // 获取权益说明
        getEquityStatement(id) {
            uni.request({
                url: "/increased.Vip/GetVipDetail",
                method: "POST",
                data: {
                    vip_id: id,
                },
                success: (res) => {
                    this.info = res.res.data;
                    this.info.explain = this.info.explain.replace(/\<img/gi, '<img style="max-width: 100%;height:auto"');
                },
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.member {
    width: 100%;
    background-color: #fff;

    .mbg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        height: 550rpx;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;

        .nav {
            width: 100%;
            /**
			height: 100rpx;
			position: absolute;
            top: 120rpx;
            left: 0;
            z-index: 1;*/
            padding: 40rpx 0;

            /deep/.uni-scroll-view-content {
                width: 110%;
                display: flex;
                flex-wrap: nowrap;
                align-items: center;

                // justify-content: space-around;
                &:last-child {
                    margin-right: 40rpx;
                }
            }

            .nav-scroll {
                width: 100%;
                height: 100rpx;
                display: flex;
                align-items: center;
                white-space: nowrap;
                overflow-x: auto;

                .nav-item {
                    width: 98rpx;
                    height: 98rpx;
                    color: #000;
                    margin-left: 40rpx;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .nav-text {
                padding: 33rpx 60rpx;
                color: #fff;

                .nav-text-1 {
                    display: block !important;
                    font-family: Source Han Sans CN;
                    font-weight: bold;
                    font-size: 30rpx;
                    color: #faf5ec;
                    line-height: 36rpx;
                }

                .nav-text-2 {
                    display: block;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #faf5ec;
                    line-height: 36rpx;
                }
            }
        }

        .abg {
            width: 100%;
            position: absolute;
            bottom: -1rpx;
        }

        .mcontent-title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 20rpx;

            z-index: 1;


        }




    }

    .parase {
        // height: 300px;
        // padding-bottom: 100rpx;
        // overflow-y: auto;
        // border: 1px solid #ccc;
    }
}
</style>
